import React, { Component } from 'react'
import {
    View, TextInput, StyleSheet, Text, Image, SafeAreaView, Navigator, ScrollView, TouchableOpacity
} from 'react-native'
// import QRCode from 'react-native-qrcode';
// import NavBar from '../../components/PublicHeader';
import { Images } from '../../public/images/images'
import { Constant } from '../../public/js/constant';
import fetchWebApi from '../../public/WebApi/fetchBase';
import { POST_SEARCHHOMEPAGE } from '../../public/WebApi/searchApis';
import getStorageValue from '../../utils/getStorageValue';
import Layer from '../../utils/Layer';
import AsyncStorage from '@react-native-community/async-storage';
export default class search extends Component {
    constructor(props) {
        super(props)
        this.state = {
            searchText: "",
            xiaoxi: '附近消息',
            isWXAppInstalled: false,
            data: []
        }


    }
    componentDidMount() {
        this.Topsearch()
    }

    // async componentDidMount() {
    //     WeChat.registerApp('wxc5c974ea0871a50f', 'https://www.ehomepoct.com/');
    //     // 新玩法
    //     // await Preload.preLoadData(() => {});
    // }
    async Topsearch() {
        const res = await fetchWebApi(POST_SEARCHHOMEPAGE, { token: await getStorageValue(Constant.TOKEN) }, 'GET');
        if (res.status == 200) {

            this.setState({
                data: res.data
            })
        } else if (res.status === 401) {
            console.log(res.status);
            await AsyncStorage.removeItem(Constant.TOKEN);
            this.props.navigation.push('Accountlogin')
        } else {
            Layer.showMsg(res.msg);

        }
    }
    onChangeText(text) {
        this.setState({
            searchText: text
        })
    };

    onClick() {

    }

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <View style={styles.layer}>
                    <Image style={{ width: 200, height: 200, resizeMode: 'center' }} source={Images.jxs} ></Image>
                    {/* <Text style={styles.Searchhomepagetext}>俊码星球</Text>
                    <Text style={styles.Searchhomepagetexts}>JINYUZHIJIAO</Text> */}
                </View>

                <View style={styles.home}>

                    <TextInput
                        style={styles.inputSearch}
                        onChangeText={text => this.onChangeText(text)}
                        placeholder={"   搜索你想要的..........."}
                        inlineImageLeft='search'
                        onFocus={() => {
                            this.props.navigation.push('searchInput', {
                                searchText: this.state.searchText
                            })
                        }}
                    />
                    <Text onPress={() => {
                        this.props.navigation.push('searchInput', {
                            searchText: this.state.searchText
                        })
                    }} style={styles.query}>查询</Text>
                </View>

                <View style={styles.tail}>

                    <Text style={styles.tallText}>{this.state.xiaoxi}</Text>
                    <ScrollView showsVerticalScrollIndicator={false}>
                        {
                            this.state.data.map((item, index) => (
                                <Text key={index} style={styles.tallcontnor} onPress={() => { this.props.navigation.push('socialcircleDetails', { businessId: item.businessId }) }}>{item.title}</Text>
                            ))
                        }
                    </ScrollView>
                </View>

            </SafeAreaView >
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        display: 'flex',
        textAlign: 'center',
        backgroundColor: 'white',

    },
    layer: {
        display: 'flex',
        justifyContent: 'space-around'
        , alignItems: 'center',
        marginTop: 40

    },
    Textred: {
        color: 'white'
    },
    inputSearch: {
        height: 40,
        width: "100%",
        borderColor: '#1890FF',
        borderWidth: 1,
        borderRadius: 10,
        // marginRight: 60,
        paddingLeft: 20
    },
    home: {
        display: 'flex',
        justifyContent: 'space-around',
        flexDirection: 'row',
        position: 'relative',
        marginTop: 30,
        marginLeft: 15,
        marginRight: 15
    },
    query: {
        backgroundColor: '#63B4FF',
        width: 75,
        height: 40,
        textAlign: 'center',
        lineHeight: 40,
        position: 'absolute',
        right: 0,
        borderBottomRightRadius: 10,
        borderTopRightRadius: 10,
        color: '#FFFFFF',
        fontWeight: 'bold',
        fontSize: 17
    },
    tail: {
        display: 'flex',
        marginTop: 50,
        backgroundColor: 'rgba(196, 196, 196, 0.09)',
        marginHorizontal: 50,
        marginLeft: 15,
        marginRight: 15,
        borderRadius: 10,
        paddingBottom: 20,
        paddingLeft: 30,
        paddingRight: 30,
        height: 355
    },
    tallText: {
        fontSize: 17,
        marginTop: 20,
        marginBottom: 10
    },
    tallcontnor: {
        fontSize: 14,
        height: 50,
        lineHeight: 50,
        borderBottomWidth: 1,
        borderBottomColor: 'rgb(240, 240, 240)',
        color: "#444"
    },
    Searchhomepagetext: {
        fontSize: 22, color: '#333333', fontWeight: 'bold'
    },
    Searchhomepagetexts: {
        fontSize: 13, color: '#333333', fontWeight: 'bold'
    }

})